<template>
	<view>
		<card headTitle="编辑地址" bodyStyle="background:#ffffff;">
			<uni-forms :model="formData" :rules="rules" ref="form">
				<uni-forms-item label="收货人" name="name">
					<uni-easyinput v-model="formData.name" placeholder="请输入收货人姓名" />
				</uni-forms-item>
				<uni-forms-item label="手机号" name="phone">
					<uni-easyinput v-model="formData.phone" placeholder="请输入收货人手机号" />
				</uni-forms-item>
				<uni-forms-item label="地址" name="address">
					<uni-easyinput v-model="formData.address" placeholder="请输入详细地址" />
				</uni-forms-item>
			</uni-forms>
		</card>

		<view class="p-3">
			<button type="primary" class="bg-white" @click="saveAddress">保存地址</button>
		</view>
	</view>
</template>

<script>
	import card from "@/components/common/card.vue";
	import uniForms from '@/components/uni-ui/uni-forms/uni-forms.vue';
	import uniFormsItem from '@/components/uni-ui/uni-forms-item/uni-forms-item.vue';
	import uniEasyinput from '@/components/uni-ui/uni-easyinput/uni-easyinput.vue';

	export default {
		components: {
			card,
			uniForms,
			uniFormsItem,
			uniEasyinput
		},
		data() {
			return {
				formData: {
					id: null,
					name: "",
					phone: "",
					address: ""
				},
				rules: {
					name: {
						rules: [
							{ required: true, errorMessage: '请输入收货人姓名' }
						]
					},
					phone: {
						rules: [
							{ required: true, errorMessage: '请输入手机号' },
							{ pattern: /^1[3456789]\d{9}$/, errorMessage: '手机号格式不正确' }
						]
					},
					address: {
						rules: [
							{ required: true, errorMessage: '请输入详细地址' }
						]
					}
				}
			};
		},
		onLoad(options) {
			if (options.id) {
				// 如果有id，说明是编辑地址，加载地址信息
				this.loadAddress(options.id);
			}
		},
		methods: {
			// 加载地址信息
			loadAddress(id) {
				// 模拟从服务器获取地址信息
				const address = {
					id: 1,
					name: "张三",
					phone: "13800138000",
					address: "北京市朝阳区某某街道123号"
				};
				this.formData = address;
			},
			// 保存地址
			saveAddress() {
				this.$refs.form.validate().then(() => {
					// 模拟保存地址到服务器
					console.log("保存地址:", this.formData);
					uni.showToast({
						title: '保存成功',
						icon: 'none'
					});
					uni.navigateBack();
				}).catch(err => {
					console.error('表单验证失败:', err);
				});
			}
		}
	};
</script>

<style>
	page {
		background: #EEEEEE;
	}

	.p-3 {
		padding: 20rpx;
	}

	button.bg-white {
		background-color: #FFFFFF;
		color: #333333;
		border: 1px solid #DDDDDD;
		border-radius: 50rpx;
		font-size: 32rpx;
		height: 80rpx;
		line-height: 80rpx;
	}
</style>